<!--
 * @Author: saber
 * @Date: 2022-04-22 14:18:33
 * @LastEditTime: 2022-06-18 09:52:45
 * @LastEditors: saber
 * @Description:
-->
<template>
  <!-- <a-range-picker v-bind="attrs" @change="onChange" :style="{ width: props.width }" /> -->
  <a-range-picker
    v-model="rangeTime"
    @change="onChange"
    :style="{ width: props.width }"
  />
</template>
<!-- <script lang="ts">
  export default defineComponent({
    name: 'TimePicker'
  })
</script> -->
<script lang="ts" setup>
import { useAttrs, computed, ref, watch } from 'vue';
import dayjs from 'dayjs';

const props = defineProps({
  startTime: String,
  endTime: String,
  width: {
    type: String,
    default: '100%'
  }
});
const attrs = useAttrs();
const timeVal = computed(() => {
  return [props.startTime, props.endTime];
});
const rangeTime = ref([props.startTime, props.endTime]);
watch(timeVal, (newVal, oldVal) => {
  if (!newVal[0] || !newVal[1]) {
    rangeTime.value = [undefined, undefined];
  }
});
const emit = defineEmits(['update:startTime', 'update:endTime']);
const onChange = (dateString: any) => {
  if (dateString && dateString.length === 2) {
    // TODO: 这种数据格式的转换 需要一个参数传递
    emit(
      'update:startTime',
      dayjs(dateString[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
    );
    emit(
      'update:endTime',
      dayjs(dateString[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
    );
  }
};
</script>
